<template>
  <div>
    <!-- <hr/>
    我是个组件
   {{name}}: {{title}}
   我的工作很特殊: {{work}}
   <button @click="changeName">直接改变props</button></button>
   <hr/>
   obj: {{obj}}
   <button @click="change">改变obj数据</button> -->
   我的工作很特殊: {{work}}
    我是数组下标: {{index}}

   <div>
     我就是要去改父级的数据
     <button @click="changWork">我要改父级数据,都按我这么做</button>
   </div>
  </div>
</template>

<script>
export default {
  // 2.用props接收属性名  当变量来使用 
  props: ['title','name','work','obj','index'],
  methods: {
    // 虽然可以这么干 但是不建议在子组件修改父级的数据
    change() {
      console.log(this.obj)
      this.obj.work= '无比帅气的老师'
    },
    changeName() {
      this.name= '卧龙凤雏'
    },
    changWork() {
      this.$emit("change-work", '我就爱变,爱咋咋地,多情种子', this.index)
    }
  }
}
</script>

<style>

</style>